<template>
  <div id="app">
    <div class="row">
      <lk-button>按钮</lk-button>
      <lk-button type="primary">按钮</lk-button>
      <lk-button type="success">按钮</lk-button>
      <lk-button type="info">按钮</lk-button>
      <lk-button type="warning">按钮</lk-button>
      <lk-button type="danger">按钮</lk-button>
    </div>
    <div class="row">
      <lk-button plain>按钮</lk-button>
      <lk-button plain type="primary">按钮</lk-button>
      <lk-button plain type="success">按钮</lk-button>
      <lk-button plain type="info">按钮</lk-button>
      <lk-button plain type="warning">按钮</lk-button>
      <lk-button plain type="danger">按钮</lk-button>
    </div>
    <div class="row">
      <lk-button round>按钮</lk-button>
      <lk-button round type="primary">按钮</lk-button>
      <lk-button round type="success">按钮</lk-button>
      <lk-button round type="info">按钮</lk-button>
      <lk-button round type="warning">按钮</lk-button>
      <lk-button round type="danger">按钮</lk-button>
    </div>
    <div class="row">
      <lk-button circle icon="lk-icon-edit"></lk-button>
      <lk-button circle icon="lk-icon-message" type="primary" @click="hh"></lk-button>
      <lk-button circle icon="lk-icon-add" type="success"></lk-button>
      <lk-button circle icon="lk-icon-bottom" type="info"></lk-button>
      <lk-button circle icon="lk-icon-attachment" type="warning"></lk-button>
      <lk-button circle icon="lk-icon-shanchu" disabled type="danger"></lk-button>
    </div>
    <div class="row">
      <lk-button @click="visible = true">dianji</lk-button>
      <lk-dialog width="30%" top="300px" :visible.sync="visible">
        hhh
        <template v-slot:footer>
          <lk-button type="primary" @click="visible = false">确定</lk-button>
          <lk-button @click="visible = false">取消</lk-button>
        </template>
      </lk-dialog>
      <lk-dialog>
        <template v-slot:title>
          <span>我是标题</span>
        </template>
      </lk-dialog>
    </div>
  
    <div class="row">
      <lk-input placeholder="请输入内容" v-model="userName" clearable></lk-input>
      <lk-input placeholder="请输入内容" v-model="userName" showPassword></lk-input>
    </div>

    <div class="row">
      <lk-switch v-model="active"></lk-switch>
      <lk-switch v-model="active1" activeColor="#aaa" name="username"></lk-switch>
    </div>
    
    <div class="row">
      <lk-radio v-model="radio" label="1" name="wuhan">武汉</lk-radio>
      <lk-radio v-model="radio" label="2" name="hefei">合肥</lk-radio>
      <!-- <lk-radio-group v-model="radio">
        <lk-radio label="1" name="wuhan">武汉</lk-radio>
        <lk-radio label="2" name="hefei">合肥</lk-radio>
      </lk-radio-group> -->
    </div>

    <div class="row">
      <lk-checkbox v-model="checked" label="合肥"></lk-checkbox>
      <lk-checkbox-group v-model="checkList">
        <lk-checkbox label="北京">北京</lk-checkbox>
        <lk-checkbox label="合肥">合肥</lk-checkbox>
        <lk-checkbox label="上海">上海</lk-checkbox>
        <lk-checkbox label="武汉">武汉</lk-checkbox>
      </lk-checkbox-group>
    </div>

    <div class="row">
      <lk-form :model="form">
        <lk-form-item label="名字">
          <lk-input v-model="form.name"></lk-input>
        </lk-form-item>
        <lk-form-item label="地点">
          <lk-input v-model="form.location"></lk-input>
        </lk-form-item>
      </lk-form>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      visible: false,
      userName: 'hh',
      active: false,
      active1: false,
      radio: '1',
      checked: true,
      checkList: [],
      form: {
        name: '',
        location: ''
      }
    }
  },
  methods: {
    hh() {
      alert()
    }
  }
}
</script>

<style lang="scss">
#app .lk-input {
  width: 200px;
}
</style>
